<table ng-if="sidebar.current_tab == 'general'" class="list general" id="general-list">
  <thead>
    <tr>
      <th class="align-begin truncate">General Colors</th>
      <th class="big-color-box" style="width: 70px;">Color</th>
      <th class="check-box"></th>
    </tr>
  </thead>

  <tbody ui-sortable="sortable_options" ng-model="Theme.gcolors"
         ng-style="{ 'background-color': Color.parse(Theme.bg.color), 'color': Color.parse(Theme.fg.color) }">

    <tr ng-repeat="gcolor in Theme.gcolors track by gcolor.name"
        ng-click="mark_as_selected_gcolor(gcolor)"
        ng-class="{ 'selected': gcolor == general_selected_rule }"
        class="rule-{{$index}}">
      <td class="name-box"
          ng-dblclick="GeneralColorsPopover.show(gcolor, $index)">{{gcolor.name}}</td>

      <td ng-if="!gcolor.isColor">
        <input type="text" class="gcolor-text-input" ng-model="gcolor.color">
      </td>

      <td ng-if="gcolor.isColor">
          <div class="colorpicker-box"
               ng-click="CP.pick(gcolor, 'color')"
               ng-class="{ 'has_color': Color.is_color(gcolor.color) }"
               ng-style="{ 'background-color': Color.parse(gcolor.color), 'border-color': Theme.border_color() }"></div>
      </td>
      <td></td>
    </tr>
  </tbody>
</table>
